<div>
    <div class="tab-head" >
        <div >
            <label>{{'user.loginId'|translate}}</label>
            <input nz-input style="width: 120px;" [(ngModel)]="page.loginId" placeholder="{{'user.loginId'|translate}}{{'placeholder.search'|translate}}" />
        </div>
        <div >
            <label>{{'user.email'|translate}}</label>
            <input nz-input style="width: 150px;" [(ngModel)]="page.email" placeholder="{{'user.email'|translate}}{{'placeholder.search'|translate}}" />
        </div>
        <div>
            <label>{{'user.createTime'|translate}}</label>
            <nz-range-picker nzFormat='yyyy-MM-dd' style="width: 240px;" [(ngModel)]="dateRange" (ngModelChange)="onChangeDate($event)"></nz-range-picker>
        </div>
        <div>
            <button nz-button class="noradius" nzType="primary" (click)="sherch()">{{'placeholder.search'|translate}}</button>
        </div>
    </div>
    <div class="tab-title">
		{{'user.listTitle'|translate}}
		<a routerLink="/basicSetting/userAdd">{{'user.add'|translate}}</a>
    </div>
    <nz-table class="medical-table" #columnTable [nzSize]='small' [nzTotal]="page.pages" [nzPageIndex]="page.pageNo" nzPageSize="10" (nzPageIndexChange)="changeCurrentPage($event)" [nzFrontPagination]="false" [nzLoading]="tableLoading"
        [nzData]="dataList" [nzScroll]="{ x: '1565px' }">
        <thead>
            <tr>
                <th nzWidth="100px">{{'user.id'|translate}}</th>
                <th nzWidth="100px">{{'user.level'|translate}}</th>
                <th nzWidth="180px">{{'user.createTime'|translate}}</th>
                <th nzWidth="180px">{{'user.vipExpireTime'|translate}}</th>
                <th nzWidth="180px">{{'user.loginId'|translate}}</th>
                <th nzWidth="195px">{{'user.email'|translate}}</th>
                <th nzWidth="140px">{{'user.mobile'|translate}}</th>
                <th nzWidth="140px">{{'user.availableBalance'|translate}}</th>
                <th nzWidth="90px">{{'user.active'|translate}}</th>
                <th nzWidth="250px" nzRight="0">{{'cz.title'|translate}}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of columnTable.data">
                <td>{{ data.id }}</td>
                <td>
					<nz-tag *ngIf="data.level === 'normal'" [nzColor]="'#aaa'">{{'userLevel.normal'|translate}}</nz-tag>
					<nz-tag *ngIf="data.level === 'vip'" [nzColor]="'#f50'">{{'userLevel.vip'|translate}}</nz-tag>
				</td>
                <td>{{ data.createTime?data.createTime.split(' ')[0] : '--' }}</td>
                <td>{{ data.vipExpireTime?data.vipExpireTime.split(' ')[0] : '--' }}</td>
                <td>{{ data.loginId }}</td>
                <td>{{ data.email}}</td>
                <td>{{ data.mobile}}</td>
                <td>{{ data.availableBalance}}</td>
                <td>
                    <span *ngIf="data.active === 'UNAUDIT'">{{'userStatus.UNAUDIT'|translate}}</span>
                    <span *ngIf="data.active === 'AUDIT'">{{'userStatus.AUDIT'|translate}}</span>
                    <span *ngIf="data.active === 'ACTIVE'">{{'userStatus.ACTIVE'|translate}}</span>
                    <span *ngIf="data.active === 'FREEZE'">{{'userStatus.FREEZE'|translate}}</span>
                </td>
                <td nzRight="0">
                    <a *ngIf="data.active === 'ACTIVE'" style="color: red;" (click)='onChangeStatus(data,"N")'>{{'cz.freeze'|translate}}</a>
                    <a *ngIf="data.active === 'FREEZE'" style="color: green;" (click)="changeStatus(data,'ACTIVE')">{{'cz.activate'|translate}}</a>
                    <a *ngIf="data.active === 'AUDIT'" style="color: rgb(214, 145, 16);" [routerLink]="['/basicSetting/rechargeAdd']" >{{'cz.recharge'|translate}}</a>
                    <a *ngIf="data.active === 'UNAUDIT'" style="color: rgb(214, 145, 16);" (click)="changeStatus(data,'AUDIT')">{{'cz.audit'|translate}}</a>
                    <a *ngIf="data.active === 'AUDIT'" style="color: rgb(214, 145, 16);" (click)="changeStatus(data,'UNAUDIT')">{{'cz.unAudit'|translate}}</a>
                    <a [routerLink]="['/basicSetting/userLog']" [queryParams]="{id:data.id}">{{'cz.log'|translate}}</a>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>